<template>
  <div class="app-container">
  <el-card class="box-card" style="--el-card-padding:0">
    <template #header>
      <div class="card-header">
        <span style="display: flex;align-items: center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tasks"></use>
          </svg>
          生产型</span>
        <el-button class="button" text>{{ processFacNum }}家</el-button>
      </div>
    </template>
    <el-collapse style="--el-collapse-header-height:70px;" v-model="activeNames">
      <el-collapse-item v-for="(item,index) in processTypeList" :key="index" :name="item.typeCode">
        <template #title>
          <div class="sub-title">
            <div style="display: flex;align-items: center">
              <svg class="icon" aria-hidden="true" style="fill: #409EFF">
                <use xlink:href="#icon-icon_duihao-mian"></use>
              </svg>
              {{ foo(item.typeCode) }}
            </div>
            <div>{{ item.facNum }}家</div>
          </div>
        </template>
        <div class="content">
          <el-link v-for="(fac,facIndex) in item.facs" :key="facIndex" class="content-link" @click="navTo(fac, foo(item.typeCode))">{{ fac.fac }}</el-link>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-card>
  <el-card class="box-card" style="--el-card-padding:0;margin-top: 20px">
    <template #header>
      <div class="card-header">
        <span style="display: flex;align-items: center">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-youxuliebiao"></use>
          </svg>
          清洗型</span>
        <el-button class="button" text>{{ cleanFacNum }}家</el-button>
      </div>
    </template>
    <div style="padding: 20px">
      <el-link v-for="(fac,facIndex) in cleanTypeList[0].facs" :key="fac" class="content-link" @click="navToClean(fac)">{{ fac.fac }}</el-link>
    </div>
  </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { mdmIndex } from '@/scripts/api'
const activeNames=ref([])
const processTypeList = ref([])
const cleanTypeList = ref([])
const processFacNum = ref(0)
const cleanFacNum = ref(0)
const typeMap = {
  "11":{code: "BusinessTypeView", text: "商业类"},
  "12":{code: "CommonTypeView", text: "安捷力类"},
  "13":{code: "CommonTypeView", text: "市场类"},
  "14":{code: "CommonTypeView", text: "自定义类"},
  "21":{code: "CleanMarketTypeView", text: "cleanMarketType"},
}
await mdmIndex().then((res)=>{
  processTypeList.value = res.data.process
  cleanTypeList.value = res.data.clean
  processFacNum.value = res.data.process.map(i=>i.facNum).reduce((p,n)=>p+n);
  console.log(processFacNum.value)
  cleanFacNum.value = res.data.clean.length ?  res.data.clean.map(i=>i.facNum).reduce((p,n)=>p+n) : 0
  activeNames.value = res.data.process.map(item=>item.typeCode)
})


const foo=(typeCode)=>{
  return typeMap[typeCode].text
}

const navTo=(fac, subType)=>{

  router.push({
    path: `/mdm/fac/${typeMap[fac.typeCode].code}`,
    query: { facId: fac.dataowner, facName:fac.fac, subType}
  })
}

const navToClean=(fac)=>{
  router.push({
    path: '/mdm/fac/CleanMarketTypeView',
    query: {facName:fac.fac}
  })
}

</script>
<style scoped>
.card-header {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  background-color: #efefef;
  height: 50px;
}
.sub-title{
  font-size: 22px;display: flex;justify-content: space-between;padding:0 10px 0 30px;width: 100%;
  align-items: center;
}
.content{
  padding: 10px 20px;display: flex;flex-wrap: wrap;justify-items: flex-start
}
.content-link{
  font-size: 18px;padding: 0 20px
}
.content-link:hover{
  font-size: 20px;
}
.button{
  font-size: 24px;
}
.icon{
  width: 24px;
  margin-right: 5px;
}
</style>
